<template>
  <div class="app-search">
    <div class="searchColumn">
      <search-box ref="searchBox" class="searchBox" :placeholder="placeholder" @search="saveSearch" @query="onQueryChange"></search-box>
      <div class="cancel" @click="cancelClick">
        取消
      </div>
    </div>
    <transition name="breadcrumb">
      <section class="searchText" v-show="!showResult">
        <div class="history" v-show="searchHistory.length">
          <div class="title">
            历史记录
            <span @click="confirm">
              <!-- <img src="~@/assets/images/home/btn_delete.png"> -->
            </span>
          </div>
          <div class="keyBOx">
            <span @click="selectKeyItem(item, 'history')" v-for="(item, index) in searchHistory" :key="index">{{item}}</span>
          </div>
        </div>
        <div class="hot" v-show="false">
          <div class="title">
            热门推荐
          </div>
          <div class="keyBOx">
            <span @click="selectKeyItem(item, 'hot')" v-for="(item, index) in hotList" :key="index">{{item}}</span>
          </div>
        </div>
      </section>
    </transition>
    <transition name="breadcrumb">
      <section class="searchResult" v-show="showResult">
        <search-result ref="searchResult"></search-result>
      </section>
    </transition>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import SearchBox from '@/components/search/search-box'
import SearchResult from './searchResult'
import { mineApi } from '@/api'
export default {
  name: 'search',
  components: {
    SearchBox,
    SearchResult
  },
  async created() {
    // const hotkey = localStorage.getItem('__HOT_KEY__')
    // if (hotkey) {
    //   this.hotList = JSON.parse(localStorage.getItem('__HOT_KEY__'))
    // }
  },
  mounted() {
    // this.$refs.searchBox.focus()
  },
  data() {
    return {
      query: '',
      showResult: false,
      placeholder: '请输入搜索关键字',
      hotList: []
    }
  },
  computed: {
    ...mapGetters([
      'searchHistory'
    ])
  },
  methods: {
    onQueryChange(text) {
      // console.log('text', text)
      this.query = text
      if (!this.query) {
        this.showResult = false
      }
    },
    cancelClick() {
      if (this.query) {
        this.$refs.searchBox.setQuery('')
        this.showResult = false
      } else {
        this.$router.go(-1)
      }
    },
    confirm() {
      const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
      this.$dialog.confirm({
      // 组件除show外的属性
        title: '确认清空历史记录'
      }).then(() => {
        _this.clearSearchHistory()
      }).catch(() => {
        // on cancel
      })
    },
    selectKeyItem(key, type) {
      this.$refs.searchBox.setQuery(key)
      this.query = key
      this.saveSearch(type)
    },
    async saveSearch(type) {
      if (this.query) {
        const res = await mineApi.getCategory({
          search: this.query,
          pageSize: 10,
          pageNo: 1
        })
        if (!res.data) {
          res.data = []
        }
        this.$refs.searchResult.updatedData(res.data.records, type, this.query)
        this.saveSearchHistory(this.query)
        this.showResult = true
      }
    },
    ...mapActions([
      'saveSearchHistory',
      'deleteSearchHistory',
      'clearSearchHistory'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
.app-search{
  overflow: hidden;
}
.searchColumn{
  display: flex;
  background-color: #fff;
  align-items: center;
  height: 40px;
  width: 100%;
  padding: 10px 10px;
  .searchBox{
    margin-right: 10px;
  }
  .cancel{
    position: relative;
    flex: 0 0 30px;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
  }
}
.searchText{
  padding: 10px;
  .history{
    padding-bottom: 10px;
  }
  .title{
    position: relative;
    color: $color-title;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 10px;
    font-weight: bold;
    span{
      @include extend-click();
      position: absolute;
      right: 0;
      top: 3px;
      img{
        width: 24px;
      }
    }
  }
  .keyBOx{
    display: flex;
    flex-wrap: wrap;
    span{
      display: block;
      margin: 5px;
      padding: 6px 10px;
      border-radius: 10px;
      line-height: 12px;
      font-size: 12px;
      background:#F3F3F3;
      color: $color-title;
    }
  }
  .hot{
    span{
      background: #FAEBF0;
    }
  }
}
</style>
